<script setup>
import { onMounted } from "vue";
import "ol/ol.css";
import MVT from "ol/format/MVT";
import Map from "ol/Map";
import TileGrid from "ol/tilegrid/TileGrid";
import VectorTileLayer from "ol/layer/VectorTile";
import VectorTileSource from "ol/source/VectorTile";
import View from "ol/View";
import { Fill, Icon, Stroke, Style, Text } from "ol/style";
import { get as getProjection } from "ol/proj";
// mapbox 秘钥
const key = "pk.eyJ1Ijoic3VtbWVyLTE5OTUiLCJhIjoiY2t0MzJuYzcyMHRybTMxcGtvZ2Z0NTVidiJ9.KPHtEGK0ndWln-KV2ohEmw";
// Calculation of resolutions that match zoom levels 1, 3, 5, 7, 9, 11, 13, 15.
const resolutions = [];
for (let i = 0; i <= 8; ++i) {
  resolutions.push(156543.03392804097 / Math.pow(2, i * 2));
}
// Calculation of tile urls for zoom levels 1, 3, 5, 7, 9, 11, 13, 15.
function tileUrlFunction(tileCoord) {
  console.log(tileCoord);

  return ("https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/" + "{z}/{x}/{y}.vector.pbf?access_token=" + key)
    .replace("{z}", String(tileCoord[0] * 2 - 1))
    .replace("{x}", String(tileCoord[1]))
    .replace("{y}", String(tileCoord[2]))
    .replace("{a-d}", "abcd".substr(((tileCoord[1] << tileCoord[0]) + tileCoord[2]) % 4, 1));
}

const map = new Map({
  layers: [
    new VectorTileLayer({
      source: new VectorTileSource({
        attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' + '© <a href="https://www.openstreetmap.org/copyright">' + "OpenStreetMap contributors</a>",
        format: new MVT(),
        tileGrid: new TileGrid({
          extent: getProjection("EPSG:3857").getExtent(),
          resolutions: resolutions,
          tileSize: 512,
        }),
        tileUrlFunction: tileUrlFunction,
      }),
      style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text),
    }),
  ],
  view: new View({
    center: [0, 0],
    minZoom: 1,
    zoom: 2,
  }),
});
onMounted(() => {
  map.setTarget("map");
});
</script>

<template>
  <div id="map" class="map"></div>
  <p>
    <div>来自mapbox的矢量地图数据</div>
  </p>
</template>
